<template>
  <div class="page-container">
    <back-header
      :customBack="router.back"
      :title="title"
      :titleSize="16"
      :titleBold="false"
      class="header-fixed"
    >
      <template #icon>
        <van-icon name="notes-o" size="24" />
      </template>
    </back-header>
    <div class="file-container">
      <div ref="pdf"></div>
    </div>
  </div>
</template>

<script setup>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { useRouter, useRoute } from "vue-router";
import BackHeader from "@/components/common/BackHeader.vue";
import host from "@/utils/host";
import { ref, onMounted } from "vue";
const pdf = ref();

const router = useRouter();
const route = useRoute();
const src = ref(null);
const title = ref("文件预览");
const type = ref("");

onMounted(() => {
  const file = route.query.file;

  import("vue").then(({ nextTick }) => {
    nextTick(() => {
      if (pdf.value) {
        src.value = file;
        new Pdfh5(pdf.value, {
          pdfurl: src.value,
        });
      }
    });
  });

  title.value = route.query.name || "文件预览";
});
</script>

<style scoped>
@import "pdfh5/css/pdfh5.css";
* {
  padding: 0;
  margin: 0;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}

.page-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.file-container {
  width: 100%;
  height: 100%;
  padding-top: 46px; /* 根据您的头部高度调整 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.file-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  transform-origin: 0 0;
  -webkit-overflow-scrolling: touch;
}
</style>
